
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		 [v-cloak]{
          display: none;
        }
        .current {
        	color: pink;
        }
	</style>
</head>
<body>
	<div id="app">
		<fruit-list :list="list">
			<!-- 父组件对子组件的内容进行加工处理！父组件从子组件中获取到的数据进行加工处理 -->
			<template slot-scope="slotProps">
				<strong v-if="slotProps.info.id == 3" class="current">
					{{slotProps.info.name}}
				</strong>
				<span v-else>{{slotProps.info.name}}</span>
			</template>
			<!-- ------------------------------------- -->
		</fruit-list>
	</div>
	<script type="text/javascript" src="js/vue.js"></script>
    <script>Vue.config.productionTip = false</script>
	<script type="text/javascript">
		/*
			作用域插槽
		*/
		Vue.component('fruit-list', {
			props: ['list'],
			template: `
				<div>
					<li :key="item.id" v-for="item in list"><slot :info="item">{{item.name}}</slot></li>
				</div>
			`
		})
		var vm = new Vue({
			el: '#app',
			data: {
				list: [
					{
						id: 1,
						name: 'apple'

					},
					{
						id: 2,
						name: 'orange'
					},
					{
						id: 3,
						name: 'banana'
					}
				]
			}
			
		})
	</script>
</body>
</html>